<template>
	<view class="service-title">
		服务包管理
	</view>

	<!-- 先判断是否有有效数据 -->
	<template v-if="hasValidData">
		<!-- 有数据时-->
		<view class="servicepack-list" v-for="row in validServicePacks" :key="row.servicePackId._id">
			<view class="servicepack-card">
				<view class="cardone-left">
					<image class="service-icon" :src="row.servicePackId?.image" mode="widthFix"></image>
				</view>
				<view class="cardone-middle">
					<text class="servicename">{{ row.servicePackId.name }}</text>
					<text class="service-tag">{{ row.servicePackId.type }}</text>
				</view>
				<view class="price">
					<text class="price-value">￥{{ row.servicePackId.price }}</text>
				</view>
			</view>
		</view>
	</template>

	<!-- 无有效数据时显示默认内容 -->
	<template v-else>
		<view class="servicepack-list">
			<view class="servicepack-card">
				<view class="cardone-left">
					<image class="service-icon"
						src="https://cdn8.axureshop.com/demo/1689476/images/%E6%9C%BA%E6%9E%84%E4%B8%BB%E9%A1%B5/u3933.png">
					</image>
				</view>
				<view class="cardone-middle">
					<text class="servicename">基础包</text>
					<text class="service-tag">基础医疗</text>
				</view>
				<view class="price">
					<text class="price-value">￥0</text>
				</view>
			</view>
		</view>
	</template>
</template>
<script setup>

</script>
<style scoped lang="scss">
	/* 服务包管理 */
	.servicepack-list {
		padding: 15px 10px;
	}

	.service-title {
		font-size: 16px;
		font-weight: bold;
		color: #333;
		padding-left: 8px;
		margin-bottom: 10px;
	}

	.servicepack-card {
		display: flex;
		align-items: center;
		background-color: #fff;
		border-radius: 8px;
		padding: 15px;
		margin-bottom: 10px;
		box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
	}

	.cardone-left .service-icon {
		width: 48px;
		height: 48px;
		margin-right: 12px;
		border-radius: 4px;
	}

	.cardone-middle {
		flex: 1;
		min-width: 0;
	}

	.servicename {
		font-size: 16px;
		font-weight: 500;
		color: #333;
		line-height: 1.4;
		margin-bottom: 4px;
		display: block;
	}

	.service-tag {
		display: inline-block;
		padding: 2px 6px;
		background-color: #f0f7ff;
		color: #2984f8;
		border-radius: 4px;
		font-size: 12px;
		margin-top: 4px;
	}

	.price {
		margin-left: 15px;
		text-align: right;
	}

	.price-value {
		color: red;
		font-size: 16px;
		font-weight: bold;
	}
</style>